<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    style="min-width: 1500px;"
    width="60%"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
    <div class="item-wrapper">
      <!-- <el-form-item label="音频code" prop="code" style="width: 400px;">
        <el-input v-model="dataForm.code" placeholder="音频code"></el-input>
      </el-form-item> -->
      <el-form-item label="音频名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="音频名称" style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item label="副标题" prop="descr">
        <el-input v-model="dataForm.descr" placeholder="请输入副标题名称" style="width:300px;" maxlength=20></el-input>
      </el-form-item>
      <el-form-item label="来源" prop="source">
        <el-select v-model="dataForm.source">
          <el-option
            v-for="item in sourceOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="名称拼音-首字母" prop="namePinyin" style="width: 400px;">
        <el-input v-model="dataForm.namePinyin" placeholder="名称拼音-首字母"></el-input>
      </el-form-item> -->
      <el-form-item label="音频分类" prop="contentType">
        <el-select v-model="dataForm.contentType" multiple>
          <el-option
            v-for="item in contentTypeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="适合年龄" prop="ageRange">
        <el-select v-model="dataForm.ageRange">
          <el-option
            v-for="item in ageRangeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id">
          </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="购买权限" prop="payRight" class="no-bottom-margin">
        <el-select v-model="dataForm.payRight">
          <el-option
            v-for="item in payRightOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="item-wrapper">
      <div class="price-item-wrapper">
        <span>音频价格：</span>
        <div style="margin: 0 30px;">
          单册价格
          <input :value="dataForm.price" placeholder="短期不收费" class="price-input" @input="oninput" type="number" ref="price" :disabled="dataForm.source == 'QT2'"/>
        </div>
        整套价格
        <input :value="dataForm.pricePkg" placeholder="短期不收费" @input="oninput" class="price-input" type="number" ref="pricePkg" :disabled="dataForm.source == 'QT2'"/>
        <div style="margin: 0 30px;">
        试听册数
        <el-input v-model="dataForm.freeAmount" placeholder="请输入整数" style="width:120px;" onpaste="return false;" oninput="if(value>10000)value=10000;if(value.length>5)value=value.slice(0,5);if(value<1)value=1" type="number" ref="freeAmount"></el-input>
        </div>
      </div>
      <div class="price-item-wrapper" style="margin-top: 12px">
        <span style="color: red;">会员价格：</span>
        <div style="margin: 0 30px;">
          单册价格
          <input :value="dataForm.priceVip" placeholder="短期不收费" @input="oninput" class="price-input" type="number" ref="priceVip" :disabled="dataForm.source == 'QT2'"/>
        </div>
        整套价格
        <input :value="dataForm.pricePkgVip" placeholder="短期不收费" @input="oninput" class="price-input" type="number" ref="pricePkgVip" :disabled="dataForm.source == 'QT2'"/>
      </div>
    </div>
    <div class="item-wrapper" style="display: flex;flex-direction: row;">
      <div class="item-pic-wrapper">
        <span style="color: #f56c6c;margin-right: 4px">*</span>封面图：
        <div style="font-size: 12px;margin-right: 6px;">限传一张图片,图片尺寸最佳为400X480像素</div>
        <div class="coverImg-wrapper pic"  style="margin-right: 125px;">
          <el-upload
            ref="uploadCoverImg"
            :action="uploadImgUrl"
            :on-success="handleCoverImgSuccess"
            :on-error="handleCoverImgError"
            :show-file-list="showCoverImgUpload"
            :before-upload="beforeCoverImgUpload">
            <img v-if="dataForm.coverImg" :src="dataForm.coverImg" class="coverImg">
            <i v-else class="el-icon-plus coverImg-uploader-icon"></i>
          </el-upload>
          <!--<span style="font-size: 12px;margin-left: 12px;margin-right: 6px;">限传一张图片,图片尺寸最佳为400X480像素</span>-->
        </div>
        <span class="error-tip">{{coverImgErrorTip}}</span>
      </div>
      <div class="item-pic-wrapper">
        <span> 轮播图：</span>
        <div style="font-size: 12px;margin-right: 6px;">限传一张轮播图,图片尺寸最佳为960X540像素</div>
        <div class="bannerImg-wrapper pic">
          <el-upload
            ref="uploadBannerImg"
            :action="uploadImgUrl"
            :show-file-list="showBannerImgUpload"
            :on-success="handleBannerImgSuccess"
            :on-error="handleBannerImgError"
            :before-upload="beforeBannerImgUpload">
            <img v-if="dataForm.bannerImg" :src="dataForm.bannerImg" class="bannerImg">
            <i v-else class="el-icon-plus bannerImg-uploader-icon"></i>
          </el-upload>

        </div>
        <span class="error-tip">{{bannerImgErrorTip}}</span>
      </div>
      <div class="item-pic-wrapper">
        <span> 全屏背景图：</span>
        <div style="font-size: 12px;margin-right: 6px;">限传一张背景图,图片尺寸最佳为960X540像素</div>
        <div class="bannerImg-wrapper pic">
          <el-upload
            ref="uploadScreenImg"
            :action="uploadImgUrl"
            :show-file-list="showScreenImgUpload"
            :on-success="handleScreenImgSuccess"
            :on-error="handleScreenImgError"
            :before-upload="beforeScreenImgUpload">
            <img v-if="dataForm.screenImg" :src="dataForm.screenImg" class="bannerImg">
            <i v-else class="el-icon-plus bannerImg-uploader-icon"></i>
          </el-upload>

        </div>
        <span class="error-tip">{{screenImgErrorTip}}</span>
      </div>
    </div>
    <div class="item-wrapper">
      <!-- <el-form-item label="子音频个数：" prop="itemCount">
        <el-input v-model="dataForm.itemCount" placeholder="子音频个数"></el-input>
      </el-form-item> -->
      <el-form-item label="上下架状态：" prop="status">
        <el-radio v-model="dataForm.status" :label="1">上架</el-radio>
        <el-radio v-model="dataForm.status" :label="0">下架</el-radio>
      </el-form-item>
      <el-form-item label="简介：" prop="summary">
        <el-input v-model="dataForm.summary" placeholder="240字内" type="textarea" :rows="5" maxlength="240"></el-input>
      </el-form-item>
      <!-- <el-form-item label="备注：" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item label="来源：" prop="source">
        <el-input v-model="dataForm.source" placeholder="来源"></el-input>
      </el-form-item>
      <el-form-item label="p2位置图标：" prop="cornerIdP2">
        <el-input v-model="dataForm.cornerIdP2" placeholder="p2位置图标"></el-input>
      </el-form-item>
      <el-form-item label="子册图标一致：" prop="cornerSyncP2">
        <el-radio v-model="dataForm.cornerSyncP2" :label="1">是</el-radio>
        <el-radio v-model="dataForm.cornerSyncP2" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="p3位置图标：" prop="cornerIdP3">
        <el-input v-model="dataForm.cornerIdP3" placeholder="p3位置图标"></el-input>
      </el-form-item>
      <el-form-item label="子册图标一致：" prop="cornerSyncP3">
        <el-radio v-model="dataForm.cornerSyncP3" :label="1">是</el-radio>
        <el-radio v-model="dataForm.cornerSyncP3" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="p4位置图标：" prop="cornerIdP4">
        <el-input v-model="dataForm.cornerIdP4" placeholder="p4位置图标"></el-input>
      </el-form-item>
      <el-form-item label="子册图标一致：" prop="cornerSyncP4">
        <el-radio v-model="dataForm.cornerSyncP4" :label="1">是</el-radio>
        <el-radio v-model="dataForm.cornerSyncP4" :label="0">否</el-radio>
      </el-form-item> -->
    </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          code: '',
          name: '',
          namePinyin: '',
          contentType: [],
          ageRange: '',
          payRight: '',
          price: '',
          pricePkg: '',
          priceVip: '',
          pricePkgVip: '',
          coverImg: '',
          bannerImg: '',
          screenImg: '',
          itemCount: '',
          status: '',
          summary: '',
          remark: '',
          source: '',
          cornerIdP2: '',
          cornerSyncP2: '',
          cornerIdP3: '',
          cornerSyncP3: '',
          cornerIdP4: '',
          cornerSyncP4: '',
          freeAmount: ''
        },
        contentTypeOptions: [],
        sourceOptions: [],
        ageRangeOptions: [
          {id: 0, label: '0~3岁'},
          {id: 4, label: '4~6岁'},
          {id: 7, label: '7岁以上'},
        ],
        payRightOptions: [{id: 'all', label: '所有'}, {id: 'serial', label: '全册'}],
        coverImgErrorTip: '',
        showCoverImgUpload: true,
        bannerImgErrorTip: '',
        showBannerImgUpload: true,
        screenImgErrorTip: '',
        showScreenImgUpload: true,
        uploadCoverImgUrl: this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`),
        uploadBannerImgUrl: this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`),
        uploadImgUrl: this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`),
        dataRule: {
          code: [
            { required: true, message: '音频code不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '音频名称不能为空', trigger: 'blur' }
          ],
          namePinyin: [
            { required: true, message: '名称拼音-首字母不能为空', trigger: 'blur' }
          ],
          contentType: [
            { required: true, message: '音频类型不能为空', trigger: 'blur' }
          ],
          ageRange: [
            { required: true, message: '年龄范围(如:0~3岁)不能为空', trigger: 'blur' }
          ],
          payRight: [
            { required: true, message: '购买权限(all所有，serial全册)不能为空', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '单册价格不能为空', trigger: 'blur' }
          ],
          pricePkg: [
            { required: true, message: '整套价格不能为空', trigger: 'blur' }
          ],
          priceVip: [
            { required: true, message: '会员单册价格不能为空', trigger: 'blur' }
          ],
          pricePkgVip: [
            { required: true, message: '会员整套价格不能为空', trigger: 'blur' }
          ],
          coverImg: [
            { required: true, message: '封面图不能为空', trigger: 'blur' }
          ],
          // bannerImg: [
          //   { required: true, message: '轮播图不能为空', trigger: 'blur' }
          // ],
          // screenImg: [
          //   { required: true, message: '全屏背景图不能为空', trigger: 'blur' }
          // ],
          // itemCount: [
          //   { required: true, message: '子音频个数不能为空', trigger: 'blur' }
          // ],
          status: [
            { required: true, message: '上下架状态(1上架,0下架)不能为空', trigger: 'blur' }
          ],
          // summary: [
          //   { required: true, message: '简介不能为空', trigger: 'blur' }
          // ],
          // remark: [
          //   { required: true, message: '备注不能为空', trigger: 'blur' }
          // ],
          // source: [
          //   { required: true, message: '来源不能为空', trigger: 'blur' }
          // ],
          // cornerIdP2: [
          //   { required: true, message: 'p2位置图标不能为空', trigger: 'blur' }
          // ],
          // cornerSyncP2: [
          //   { required: true, message: '子册图标一致（0否，1是）不能为空', trigger: 'blur' }
          // ],
          // cornerIdP3: [
          //   { required: true, message: 'p3位置图标不能为空', trigger: 'blur' }
          // ],
          // cornerSyncP3: [
          //   { required: true, message: '子册图标一致（0否，1是）不能为空', trigger: 'blur' }
          // ],
          // cornerIdP4: [
          //   { required: true, message: 'p4位置图标不能为空', trigger: 'blur' }
          // ],
          // cornerSyncP4: [
          //   { required: true, message: '子册图标一致（0否，1是）不能为空', trigger: 'blur' }
          // ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.dataForm.payRight = 'serial'
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/audio/pbaaudio/info/${this.dataForm.id}`),
              method: 'post',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm = data.data
                // this.dataForm.code = data.pbaaudio.code
                // this.dataForm.name = data.pbaaudio.name
                // this.dataForm.namePinyin = data.pbaaudio.namePinyin
                // this.dataForm.contentType = data.pbaaudio.contentType
                // this.dataForm.ageRange = data.pbaaudio.ageRange
                // this.dataForm.payRight = data.pbaaudio.payRight
                // this.dataForm.price = data.pbaaudio.price
                // this.dataForm.pricePkg = data.pbaaudio.pricePkg
                // this.dataForm.priceVip = data.pbaaudio.priceVip
                // this.dataForm.pricePkgVip = data.pbaaudio.pricePkgVip
                // this.dataForm.coverImg = data.pbaaudio.coverImg
                // this.dataForm.bannerImg = data.pbaaudio.bannerImg
                // this.dataForm.screenImg = data.pbaaudio.screenImg
                // this.dataForm.itemCount = data.pbaaudio.itemCount
                // this.dataForm.status = data.pbaaudio.status
                // this.dataForm.summary = data.pbaaudio.summary
                // this.dataForm.remark = data.pbaaudio.remark
                // this.dataForm.source = data.pbaaudio.source
                // this.dataForm.cornerIdP2 = data.pbaaudio.cornerIdP2
                // this.dataForm.cornerSyncP2 = data.pbaaudio.cornerSyncP2
                // this.dataForm.cornerIdP3 = data.pbaaudio.cornerIdP3
                // this.dataForm.cornerSyncP3 = data.pbaaudio.cornerSyncP3
                // this.dataForm.cornerIdP4 = data.pbaaudio.cornerIdP4
                // this.dataForm.cornerSyncP4 = data.pbaaudio.cornerSyncP4
              }
            })
          } else {
            this.coverImgErrorTip = ''
            this.dataForm.bannerImg = ''
            this.dataForm.coverImg = ''
            this.dataForm.screenImg = ''
            this.dataForm.summary = ''
            this.dataForm.status = null
            this.dataForm.contentTypeName = ''
            this.dataForm.price = ''
            this.dataForm.pricePkg = ''
            this.dataForm.priceVip = ''
            this.dataForm.pricePkgVip = ''
            this.dataForm.freeAmount = ''
          }
        })
        this.getcontentTypeList()
        this.getSource()
      },
      // 获取来源
      getSource () {
        this.$http({
              url: this.$http.adornUrl(`/picbook/combobox/listSource`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.sourceOptions = data.data
              }
            })
      },
      // 价格输入框过滤
      oninput (e) {
        // 通过正则过滤小数点后两位
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
      },
      //音频类型下拉框查询
      getcontentTypeList () {
        this.$http({
          // url: this.$http.adornUrl(`/picbook/bookcategory/comboBox`),
          url: this.$http.adornUrl(`/picbook/combobox/audio/listCategory`),
          method: 'post',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.contentTypeOptions = data.data
          }
        })
      },
      handleCoverImgSuccess (res, file) {
        // this.dataForm.coverImg = URL.createObjectURL(file.raw)
        this.dataForm.coverImg = res.url
        let _this = this
        setTimeout(function () {
          _this.$refs.uploadCoverImg.clearFiles()
        }, 1000)
      },
      beforeCoverImgUpload (file) {
        this.coverImgErrorTip = ''
        if (file.type.indexOf('image') < 0) {
          this.coverImgErrorTip = '图片格式不正确'
          return false
        }
      },
      handleCoverImgError (err, file, fileList) {
        this.coverImgErrorTip = '上传失败'
      },
      handleBannerImgSuccess (res, file) {
        // this.dataForm.bannerImg = URL.createObjectURL(file.raw)
        this.dataForm.bannerImg = res.url
        let _this = this
        setTimeout(function () {
          _this.$refs.uploadBannerImg.clearFiles()
        }, 1000)
      },
      beforeBannerImgUpload (file) {
        this.bannerImgErrorTip = ''
        if (file.type.indexOf('image') < 0) {
          this.bannerImgErrorTip = '图片格式不正确'
          return false
        }
      },
      handleBannerImgError (err, file, fileList) {
        this.bannerImgErrorTip = '上传失败'
      },
      handleScreenImgSuccess (res, file) {
        this.dataForm.screenImg = res.url
        let _this = this
        setTimeout(function () {
          _this.$refs.uploadScreenImg.clearFiles()
        }, 1000)
      },
      beforeScreenImgUpload (file) {
        this.screenImgErrorTip = ''
        if (file.type.indexOf('image') < 0) {
          this.screenImgErrorTip = '图片格式不正确'
          return false
        }
      },
      handleScreenImgError (err, file, fileList) {
        this.screenImgErrorTip = '上传失败'
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          this.dataForm.price = this.$refs.price.value
          this.dataForm.pricePkg = this.$refs.pricePkg.value
          this.dataForm.priceVip = this.$refs.priceVip.value
          this.dataForm.pricePkgVip = this.$refs.pricePkgVip.value
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/audio/pbaaudio/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                pbaAudio: this.dataForm
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  // duration: 1500,
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .item-wrapper {
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    width: 100%;
    .price-item-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-form-item__content {
        float: left;
      }
      .price-input {
        width: 120px;
        margin-left: 10px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        -webkit-appearance: none;
        border: 1px solid #dcdfe6;
        color: #606266;
        padding: 0 15px;
      }
    }
    .item-pic-wrapper {
      display: inline-block;
      .pic {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 20px;
      }
      .avatar-uploader .el-upload {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .coverImg-wrapper {
        .coverImg-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          border: 1px solid #d9d9d9;
          border-radius: 6px;
          width: 125px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }
        .coverImg {
          width: 125px;
          height: 150px;
          display: block;
        }
      }
      .bannerImg-wrapper {
        .bannerImg-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          border: 1px solid #d9d9d9;
          border-radius: 6px;
          width: 266px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }
        .bannerImg {
          width: 266px;
          height: 150px;
          display: block;
        }
      }
    }
  }

  .el-form-item {
    margin-bottom: 18px;
  }

  .no-bottom-margin.el-form-item {
    margin-bottom: 0px;
  }

  .error-tip {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }

  /** 去除input输入框样式 */
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
</style>